<template>
	<view class="itu-demo">
		<view class="itu-demo-wrap">
			<view class="itu-demo-title">演示单选效果</view>
			<view class="itu-demo-area">
				<view class="itu-demo-result-line" @click="showMoment=true">
					<text>日期：{{moment|| '请选择日期'}}</text>
				</view>
			</view>
			<itu-moment v-model="showMoment" :timeSlot="15" titleAlign="left" :showRangeTime="false" :date="momentDate" :moment="moment" startTime="00:00" endTime="24:00" :borderRadius="16" shape="round" @change="changeMoment"></itu-moment>
		</view>
		<view class="itu-demo-wrap itu-mt-20">
			<view class="itu-demo-title">演示多选连续效果</view>
			<view class="itu-demo-area">
				<view class="itu-demo-result-line" @click="showRangeMoment=true">
					<text>日期：{{momentRange|| '请选择日期'}}</text>
				</view>
			</view>
		</view>
		<itu-moment mode="range" shape="round" :timeSlot="15" :momentRange="momentRange" @changeDate="changeDate" startTime="00:15" endTime="24:00" :momentSlotList="momentSlotList" :borderRadius="16" v-model="showRangeMoment" @change="changeMomentRange"></itu-moment>
		
		<view class="itu-demo-wrap itu-mt-20">
			<view class="itu-demo-title">演示多选不连续效果</view>
			<view class="itu-demo-area">
				<view class="itu-demo-result-line" @click="showMoments=true">
					<text>日期：{{moments|| '请选择日期'}}</text>
				</view>
			</view>
		</view>
		<itu-moment mode="range" shape="round" :continuous="false" :moments="moments" :momentSlotList="momentSlotList" :borderRadius="16" v-model="showMoments" @change="changeMoments"></itu-moment>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showMoment: false,
				moment: "",
				momentDate: `${this.$dayjs().format("YYYY-MM-DD")}`,
				showRangeMoment: false,
				showMoments: false,
				rangeDate: '',
				momentRange: [`${this.$dayjs().format("YYYY-MM-DD")} 11:15`, `${this.$dayjs().format("YYYY-MM-DD")} 24:00`],
				moments: [`${this.$dayjs().format("YYYY-MM-DD")} 12:00`,`${this.$dayjs().format("YYYY-MM-DD")} 13:00`,`${this.$dayjs().format("YYYY-MM-DD")} 17:00`],
				momentSlotList: [{datetime: `${this.$dayjs().format("YYYY-MM-DD")} 18:00`, disabled: true, text: '已预约'},{datetime: `${this.$dayjs().format("YYYY-MM-DD")} 20:00`, disabled: true, text: '已预约'}] 
			};
		},
		onLoad({ title }) {
			this.setNavigationBarTitle(title)
		},
		methods: {
			changeMoment(e) {
				console.log("moment", e)
				this.moment = e.time;
				this.momentDate = e.date;
			},
			changeMomentRange(e) {
				console.log("momentRange", e)
				this.momentRange = e.momentRange;
			},
			changeMoments(e){
				console.log("moments", e)
				this.moments = e.moments
			},
			changeDate(date){
				console.log("date", date)
			}
		}
	}
</script>